<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>游戏助手</title>
    <style>
        body {
            font-family: 'Helvetica Neue', sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }
		
		a {
            font-size: 24px; /* 超链接字体大小 */
            color: #007bff; /* 超链接颜色 */
            text-decoration: none; /* 移除下划线 */
            display: inline-block; /* 超链接显示为块级元素 */
            margin-bottom: 15px; /* 超链接之间的间距 */
        }

        .header {
            text-align: center;
            padding: 20px;
            background-color: #f05656;
            color: #fff;
        }

        .header h1 {
            font-size: 24px;
            margin: 0;
        }

        .main-content {
            text-align: center;
            margin-top: 50px;
        }

        .input-label {
            font-size: 14px;
            font-weight: bold;
            display: block;
            margin-bottom: 10px;
            text-align: center;
        }

        .input-field {
            font-size: 16px;
            border: none;
            border-bottom: 2px solid #ccc;
            padding: 8px 16px;
            margin-top: 10px;
            margin-bottom: 20px;
            width: 80%;
            box-sizing: border-box;
            text-align: center;
            outline: none;
        }

        .color-input-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        .color-input-label {
            font-size: 14px;
            font-weight: bold;
            margin-right: 10px;
        }

        .color-input {
            width: 40px;
            height: 40px;
            padding: 0;
            border: none;
            outline: none;
        }

        .button-container {
            text-align: center;
            margin-bottom: 20px;
        }

        .button {
            font-size: 16px;
            font-weight: bold;
            background-color: #f05656;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-right: 10px;
        }

        .button-container:last-child {
            margin-bottom: 50px;
        }

        .button:hover {
            background-color: #d9534f;
        }

        .result {
            font-size: 18px;
            text-align: center;
            margin-top: 30px;
        }

        .function-title {
            text-align: left;
            margin-top: 20px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>万舰归辰</h1>
        <h1>专属游戏助手</h1>
    </div>

    <div class="main-content">
        <h2 class="function-title">随机颜色</h2>
        <div>
            <label class="input-label" for="text-input">请输入文本：</label>
            <input class="input-field" type="text" id="text-input" placeholder="在此输入文本">
        </div>

        <div class="button-container">
            <button class="button" type="button" onclick="addRandomChars()">转换</button>
            <button class="button" type="button" onclick="copyResult()">一键复制</button>
        </div>

        <div class="result" id="result"></div>
    </div>

    <div class="main-content">
        <h2 class="function-title">自定义颜色</h2>
        <div class="color-input-container">
            <label class="color-input-label" for="color-input">选择颜色：</label>
            <input class="color-input" type="color" id="color-input">
        </div>

        <div class="color-input-container">
            <input class="input-field" type="text" id="text-input-2" placeholder="在此输入文本">
        </div>

        <div class="button-container">
            <button class="button" type="button" onclick="addColorPrefix()">转换</button>
            <button class="button" type="button" onclick="copyColorResult()">一键复制</button>
        </div>

        <div class="result" id="color-result"></div>
		
		<!-- 查看加点代码 -->
		<a href="resource/addPointCode.html" target="_blank">查看加点代码</a>
		<br>

		<!-- 查看模块排行 -->
		<a href="resource/modules.html" target="_blank">查看模块排行</a>
		<br>
		<!-- 查看舰船排行 -->
		<a href="resource/ships.html" target="_blank">查看舰船排行</a>
    </div>

    <script>
        // 第一个功能：将指定字符集中的元素随机插入到录入的字符串中每个字符前边
        function addRandomChars() {
            var textInput = document.getElementById('text-input');
            var resultDiv = document.getElementById('result');
            var text = textInput.value;
            var chars = ["#R", "#G", "#Y", "#W", "#c32CD32", "#cCD7F32", "#c70DB93", "#c8F8FBD", "#P", "#O"];
            var result = '';

            for (var i = 0; i < text.length; i++) {
                result += chars[Math.floor(Math.random() * chars.length)] + text[i];
            }

            resultDiv.innerHTML = result;
        }

        // 第二个功能：将选择的颜色对应的颜色代码添加到录入的字符串前边
        function addColorPrefix() {
            var textInput = document.getElementById('text-input-2');
            var colorInput = document.getElementById('color-input');
            var resultDiv = document.getElementById('color-result');
            var text = textInput.value;
            var color = colorInput.value;
            var colorCode = color.toUpperCase();
            var result = '#' + 'c' + colorCode.substr(1, 6) + text;

            resultDiv.innerHTML = result;
        }

        // 复制结果到剪贴板（第一个功能）
        function copyResult() {
            var resultDiv = document.getElementById('result');
            var result = resultDiv.innerHTML;

            var tempInput = document.createElement('input');
            tempInput.setAttribute('value', result);
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand('copy');
            document.body.removeChild(tempInput);

            alert('已复制到剪贴板');
        }

        // 复制结果到剪贴板（第二个功能）
        function copyColorResult() {
            var resultDiv = document.getElementById('color-result');
            var result = resultDiv.innerHTML;

            var tempInput = document.createElement('input');
            tempInput.setAttribute('value', result);
            document.body.appendChild(tempInput);
            tempInput.select();
            document.execCommand('copy');
            document.body.removeChild(tempInput);

            alert('已复制到剪贴板');
        }
    </script>
</body>
</html>
